<script setup lang="ts">
import DefaultType from '~/assets/imgs/default_type.png';
import { useAuthed } from '~/composables/useAuthed';
import { StatisticsLoading } from '~/composables/useGameLoading';

const { gameTypes, gameAllQry } = queries.useGameAllQuery();

const games = computed(() => gameTypes.value?.filter((x, i) => !!i && !!x?.game && (x.show_position === 2 || x.show_position === 3)));
const authed = useAuthed();
const appStore = useAppStore();
</script>

<template>
  <div class="mb-10 flex items-center gap-6 lt-mobile:mb-13px">
    <div class="w-full overflow-hidden">
      <TSuspenseView
        v-bind="buildSvPropsOfQuery(gameAllQry)"
      >
        <swiper-container
          class="swiper_game flex items-center"
          slidesPerView="auto"
          :spaceBetween="10"
          :freeMode="true"
          :freeModeSticky="true"
          :freeModeMomentumRatio="0.3"
          :grabCursor="true"
        >
          <swiper-slide v-if="authed" class="swiper-slide__width-auto pb-1">
            <div class="custom flex cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-lg bg-#3E404C p-2 px-2.5 lt-tabletl:py-1" @click="$router.push(buildGameListRoute({ alias: 'like' }))">
              <i class="i-local:collection text-red" />
              <span class="leading-6">{{ $t('fxpVtAjQmbEaL6b1Akuek') }}</span>
            </div>
          </swiper-slide>
          <swiper-slide v-for="group in games" :key="group.alias" class="swiper-slide__width-auto pb-1" @click="$router.push(buildGameListRoute(group))">
            <div class="custom flex cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-lg bg-#3E404C p-2 px-2.5 lt-tabletl:py-1">
              <img v-if="group.alias" :src="!!group.alias ? appStore.getCdnResPath('gameTypeIcon', group.alias) : DefaultType" class="w-4">
              <span>{{ group.name }}</span>
              <div class="rounded-lg bg-#32343F px-2.5 py-1 text-xs">
                {{ group.game_count ?? 0 }}
              </div>
            </div>
          </swiper-slide>
        </swiper-container>
        <template #pending>
          <StatisticsLoading />
        </template>
      </TSuspenseView>
    </div>
    <div class="min-w-50 flex-between cursor-pointer rounded-lg bg-sys-layer-d p-2.5 text-sys-text-body lt-tabletl:hidden" @click="globalPopups.searchPopup.open?.()">
      <span>{{ $t('yaumayCeCeamLBiC9G8Dn') }}</span>
      <i class="i-local:search text-sys-text-head" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.custom {
  box-shadow: 0 5px 0 0 #2e3039;
}
</style>
